<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>群星网约车</title>
	<link rel="icon" href="../image/carMR.png" type="image/png">
	<!--这里引入页面的样式-->
	<style>
		.header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 10px 20px;
			/* 			background-color:gainsboro; */
		}
		.logo-title {
			display: flex;
			align-items: center;
			justify-content: center;
			flex: 1;
		}
		.logo {
			height: 50px;
		}

		.title {
			font-size: 24px;
			font-weight: bold;
		}

		.links {
			display: flex;
			align-items: center;
		}

		.links el-link {
			margin-left: 10px;
		}

		.user-info {
			display: flex;
			align-items: center;
		}

		.avatar {
			margin-right: 10px;
		}

		.username a {
			color: #333;
			text-decoration: none;
		}
		.order-table {
			padding: 40px;
		}
		.clickable {
			cursor: pointer;
		}
		@media (max-width: 768px) {
			.header {
				flex-direction: column;
				align-items: flex-start;
			}

			.links {
				width: 100%;
				display: flex;
				justify-content: space-around;
				position: fixed;
				bottom: 0;
				background-color: white;
				padding: 10px 0;
				box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
				z-index: 1000;
				margin-bottom: 10px;
				margin-left: -25px;
			}

			.links el-link {
				margin-left: 0;
			}

			.user-info {
				margin-top: 10px;
				width: 100%;
				justify-content: space-between;
			}
			.logo-title {
				display: flex;
				align-items: center;
				width: 100%;
				justify-content: center;
			}

			.logo {
				height: 40px;
			}

			.title {
				font-size: 20px;
			}
			.pagination-mobile {
				margin-left: -50px;
			}
		}
	</style>
</head>
<!--引入相关的文件-->
<script src="../js/vue.js"></script>
<script src="../element-ui/lib/index.js"></script>
<link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
<script src="../js/axios-0.18.0.js"></script>
<body>
<div id="app">
	<div class="header">
		<div class="logo-title">
			<img class="logo" src="../image/carMR.png">
			<span class="title">群星网约车欢迎您</span>
		</div>
		<div class="links">
			<el-link href="userMain.html" target="_self" :underline="false">主页&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</el-link>
			<el-link href="orderUserInfo.html" target="_self" :underline="false">我的订单&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</el-link>
			<el-link href="preferential.html" target="_blank" :underline="false">群星优惠&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</el-link>
			<el-link href="taxiInfo.html" target="_blank" :underline="false">群星简介&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</el-link>
			<el-link href="userInfo.html" target="_self" :underline="false">个人中心&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</el-link>
		</div>
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		<div class="user-info">
			<div>
				<el-avatar :src="avatar"></el-avatar>
			</div>
			&nbsp;&nbsp;&nbsp;&nbsp;
			<span class="username"><a id="uname" href="javascript:void(0)">{{ displayUsername }}</a></span>
			&nbsp;&nbsp;&nbsp;&nbsp;
			<el-link target="_blank" :underline="false" @click="exitInfo">退出系统</el-link>
			&nbsp;&nbsp;&nbsp;&nbsp;
		</div>
	</div>

	<div class="order-table">
		<span>订单信息：</span>
		<el-input v-model="search" placeholder="订单详情搜索" clearable @clear="handleSearch" @input="handleSearch" style="max-width: 200px;"></el-input>
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		<span>订单状态：</span>
		<el-input v-model="searchOrder" placeholder="订单状态搜索" clearable @clear="handleSearch" @input="handleSearch" style="max-width: 200px;"></el-input>
		<el-table :data="orders" style="width: 100%">
			<el-table-column prop="orderId" label="订单编号" width="120"></el-table-column>
			<el-table-column prop="driverId" label="司机编号" width="120"></el-table-column>
			<el-table-column prop="departureLocation" label="起点" width="150"></el-table-column>
			<el-table-column prop="destinationLocation" label="终点" width="150"></el-table-column>
			<el-table-column prop="orderDate" label="发起时间" width="200"></el-table-column>
			<el-table-column prop="actualAmount" label="金额" width="100"></el-table-column>
			<el-table-column prop="status" label="订单状态" width="120">
				<template slot-scope="scope">
					<el-tag
							:type="getOrderStatusType(scope.row.status)"
							@click="handleOrderClick(scope.row)"
							:class="{ clickable: scope.row.status === '待付款' }"
					>
						{{ scope.row.status }}
					</el-tag>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination
				background
				layout="total, sizes, prev, pager, next, jumper"
				:total="totalOrders"
				:page-size="pageSize"
				:current-page="currentPage"
				:page-sizes="[5, 10, 20, 50]"
				@current-change="handlePageChange"
				@size-change="handleSizeChange"
				class="pagination-mobile">
		</el-pagination>
		<!-- 支付确认弹框 -->
		<el-dialog
				title="支付确认"
				:visible.sync="dialogVisible"
				width="30%">
			<span>是否进行支付操作？</span>
			<span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmPayment">确定</el-button>
        </span>
		</el-dialog>
	</div>
</div>


<script>
	// request拦截器，将用户token放入头中
	axios.interceptors.request.use(
			config => {
				let token = localStorage.getItem("token"); // 确保 token 正确存储在 localStorage 中
				if (token) {
					config.headers['token'] = token;
				}
				return config;
			},
			error => {
				console.log(error);
				return Promise.reject(error);
			}
	);
	// 创建一个vue的实例对象,里面写那些数据和方法(一个是页面加载完后自动执行的方法，一个是其他操作后执行的代码)
	// 创建 Vue 实例
	new Vue({
		el: '#app',
		data() {
			return {
				userId: "",
				userName: "",
				avatar: "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
				search: '',
				searchOrder: '',
				currentPage: 1,
				pageSize: 10,
				totalOrders: 0,
				orders: [
					{ orderId: '123', driverId: '456', departureLocation: '北京', destinationLocation: '上海', orderDate: '2023-01-01 12:00:00', actualAmount: 100.5, status: '已完成' },
					{ orderId: '124', driverId: '457', departureLocation: '广州', destinationLocation: '深圳', orderDate: '2023-01-02 14:30:00', actualAmount: 80.0, status: '进行中' },
					// 继续添加订单
				],
				statusMap: {  // 在 data 中定义映射关系
					'待处理': '1',
					'已确认': '2',
					'已完成': '3',
					'已取消': '4',
					'待付款': '5'
				},
				dialogVisible: false, // 支付确认弹框的显示状态
				selectedOrder: null // 选中的订单
			}
		},
		methods: {
			fetchOrders() {
				const mappedStatus = this.statusMap[this.searchOrder] || this.searchOrder;
				axios.get(`/order/orders/getOrderByUserId`, {
					params: {
						userId: this.userId,
						page: this.currentPage,
						size: this.pageSize,
						keyword: this.search,
						keywordOrder: mappedStatus
					}
				}).then(response => {
					if (response.data.code === 1) {
						console.log("成功获取订单信息");
						const orders = response.data.data.list.map(order => {
							// 处理订单状态
							switch (order.status) {
								case '1':
									order.status = '待处理';
									break;
								case '2':
									order.status = '已确认';
									break;
								case '3':
									order.status = '已完成';
									break;
								case '4':
									order.status = '已取消';
									break;
								default:
									order.status = '待付款';
									break;
							}
							// 处理金额
							if (!order.actualAmount) {
								order.actualAmount = '未接单';
							}
							// 处理司机编号
							if (!order.driverId) {
								order.driverId = '未接单';
							}
							// 处理发起时间
							if (order.orderDate) {
								order.orderDate = order.orderDate.replace('T', ' ');
							}
							return order;
						});
						this.orders = orders;
						this.totalOrders = response.data.data.total;
					}
				});
			},
			handleSearch() {
				this.currentPage = 1;
				this.fetchOrders();
			},
			handlePageChange(page) {
				this.currentPage = page;
				this.fetchOrders();
			},
			handleSizeChange(size) {
				this.pageSize = size;
				this.currentPage = 1;
				this.fetchOrders();
			},
			handleOrderClick(order) {
				if (order.status === '待付款') {
					this.selectedOrder = order;
					this.dialogVisible = true;
				}
			},
			confirmPayment() {
				// 在这里处理支付操作
				localStorage.removeItem('orderId');
				console.log("确认支付订单", this.selectedOrder);
				this.dialogVisible = false;
				const cost=this.selectedOrder.totalAmount;
				axios.put('/order/orders/updateStatus1?orderId='+this.selectedOrder.orderId)
						.then(response=>{
							if(response.data.code==1){
								console.log("订单完成");
							}
						});
				axios.get('/order/pay?total_amount='+cost).then(rs=>{
					window.open(rs.data);
				})
			},
			getOrderStatusType(status) {
				switch (status) {
					case '待处理':
						return 'info';
					case '已确认':
						return 'success';
					case '已完成':
						return 'success';
					case '已取消':
						return 'danger';
					case '待付款':
						return 'warning';
					default:
						return '';
				}
			},
			exitInfo(){
				localStorage.removeItem('userId');
				localStorage.removeItem('userName');
				window.location.href = "../html/login.html";
			}
		},
		mounted(){
			this.userId = localStorage.getItem('userId');
			this.userName = localStorage.getItem('userName');
			this.avatar = localStorage.getItem('pic');
			this.fetchOrders();
			/* 		if (this.userName === null) {
                        this.$message.error('非法进入,请先登录');
                        setTimeout(() => {
                            window.location.href = "../html/login.html";
                        }, 3000); // 延迟2秒（2000毫秒）执行
                    } */
		},
		computed: {
			displayUsername() {
				// 如果 userName 不为空，显示 userName；否则显示 "未登录"
				return this.userName ? this.userName : "未登录";
			},
		},
	});
</script>
<!-- 不用vue的js代码写在下面-->
<script>
</script>
</body>
</html>